<template>
  <div class="add-goods">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 步骤条组件 -->
    <el-steps :active="active" class='mt-15' finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <!-- 标签页组件 -可以通过 tab-position 设置标签的位置- -->
    <el-tabs tab-position='left' class='mt-15' @tab-click="handleTabclick">
      <el-tab-pane label="基本信息">0</el-tab-pane>
      <el-tab-pane label="商品参数">1</el-tab-pane>
      <el-tab-pane label="商品属性">
        <div class="amap-wrapper">
          <el-amap class="amap-box" :zoom="zoom" :center="center" :vid="'amap-vue'"></el-amap>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品图片">
        <!-- 图片上传-缩略图 -->
        <!-- action属性用于指定上传服务器地址 -->
        <!-- el-upload中封装了自己的ajax，它上传的时候发的请求，不会被axios的请求拦截拦截到，自然而然那个带token的请求头也不会被添加到请求中去 -->
        <!-- file-list可以用来展示上传组件的默认图片 -->
        <el-upload class="upload-demo" :headers='headerObj' :before-upload='handleBeforeUpload' action="http://localhost:8888/api/private/v1/upload/" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容">
        <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)">
        </quill-editor>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      fileList: [
        {
          name: 'food.jpeg',
          url:
              'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      headerObj: {
        Authorization: localStorage.getItem('mytoken')
      },
      content: '',
      editorOption: { placeholder: '请输入内容' },
      zoom: 12,
      center: [113.23, 23.16]
    }
  },
  methods: {
    handleTabclick (obj) {
      console.log(obj)
      // 这个参数表示的是tab组件实例，它里面可以获取到点击到的tab索引，我们可以直接将索引值赋值给active属性，这样步骤条就可以跟着变化了
      this.active = parseInt(obj.index)
    },
    // 删除图片
    // file 文件对象 fileList 文件对象的数组
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 预览图片
    handlePreview (file) {
      console.log(file)
    },
    // 上传之前
    handleBeforeUpload (file) {
      console.log(file)
      if (file.size > 150000) {
        this.$message.warning('图片不能大于15kb')
        return false
      }
    },
    // 上传成功 - response 是响应（信息）状态
    handleSuccess (response, file, fileList) {
      console.log(response, file, fileList)
      if (response.meta.status === 200) {
        this.$message.success('上传成功')
      }
    },
    onEditorBlur (editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus (editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady (editor) {
      console.log('editor ready!', editor)
    }
  }
}
</script>
<style lang="scss" scoped>
  .quill-editor {
    height: 400px;
    .ql-container {
      height: 300px;
    }
  }
  .amap-wrapper {
    width: 500px;
    height: 500px;
  }
</style>
